import { Container, Grid, Link, List, ListItem, Typography } from "@material-ui/core"
import { makeStyles } from "@material-ui/core/styles"
import { Link as GatsbyLink } from "gatsby"
import * as React from "react"

const useStyles = makeStyles(() => ({
  root: {
    background: "#000",
    padding: "2rem 0",
  },
  title: {
    color: "#fff",
    fontSize: "1.2rem",
    fontWeight: 600,
  },
  listItemLink: {
    color: "rgba(255,255,255,.7)",
    fontWeight: 300,
  },
  copyright: {
    color: "rgba(255,255,255,.7)",
    fontWeight: 300,
    marginRight: "20px",
  },
}))

export default function Footer() {
  const classes = useStyles()
  return (
    <footer className={classes.root}>
      <Container fixed>
        <Grid container spacing={2}>
          <Grid item xs={12} sm={6} md={2}>
            <Typography variant="h4" className={classes.title} children="Mall Foundry"/>
          </Grid>
          <Grid item xs={12} sm={6} md={2}>
            <Typography variant="h4" className={classes.title} children="产品"/>
            <List>
              <ListItem disableGutters={true}>
                <Link href="/docs/stable/" className={classes.listItemLink}>Mall</Link>
              </ListItem>
              <ListItem disableGutters={true}>
                <Link href="/docs/stable/roadmap/" className={classes.listItemLink}>Mall 路线图</Link>
              </ListItem>
            </List>
          </Grid>
          <Grid item xs={12} sm={6} md={2}>
            <Typography variant="h4" className={classes.title} children="文档"/>
            <List>
              <ListItem disableGutters={true}>
                <Link href="/docs/stable/getting-started" className={classes.listItemLink}>快速入门</Link>
              </ListItem>
              <ListItem disableGutters={true}>
                <Link href="/docs/stable/best-practice/" className={classes.listItemLink}>最佳实践</Link>
              </ListItem>
              <ListItem disableGutters={true}>
                <Link href="/docs/stable/faq/mall" className={classes.listItemLink}>常见问题解答</Link>
              </ListItem>
              <ListItem disableGutters={true}>
                <Link href="/docs/releases/" className={classes.listItemLink}>版本发布说明</Link>
              </ListItem>
            </List>
          </Grid>
          <Grid item xs={12} sm={6} md={2}>
            <Typography variant="h4" className={classes.title} children="资源"/>
            <List>
              <ListItem disableGutters={true}>
                <Link href="#" className={classes.listItemLink}>博客</Link>
              </ListItem>
              <ListItem disableGutters={true}>
                <Link href="#" className={classes.listItemLink}>Gitee</Link>
              </ListItem>
            </List>
          </Grid>
          <Grid item xs={12} sm={6} md={2}>
            <Typography variant="h4" className={classes.title} children="公司"/>
            <List>
              <ListItem disableGutters={true}>
                <Link href="#" className={classes.listItemLink}>关于我们</Link>
              </ListItem>
            </List>
          </Grid>
          <Grid item xs={12} sm={6} md={2}>
            <Typography variant="h4" className={classes.title} children="联系我们"/>
            <List>
              <ListItem disableGutters={true}>
                <Link href="#" className={classes.listItemLink}>微信</Link>
              </ListItem>
            </List>
          </Grid>
        </Grid>
      </Container>
      <Container fixed>
        <Grid container spacing={2}>
          <Grid item xs={12} sm={12} md={12}>
            <List>
              <ListItem disableGutters={true}>
                <div className={classes.copyright}>©2020 山东商铸软件科技有限公司</div>
                <Link component={GatsbyLink} to="http://beian.miit.gov.cn/"
                      className={classes.listItemLink}>鲁ICP备20026456号</Link>
              </ListItem>
            </List>
          </Grid>
        </Grid>
      </Container>
    </footer>
  )
}
